<template>
    <div>
      <div class="find_tit">
          <ul>
              <li :class="{hot:indexTab==0}" @click="tabSwitch(0)"><span>全部评论</span></li>
              <li :class="{hot:indexTab==1}"  @click="tabSwitch(1)"><span>电子券评论</span></li>
              <li :class="{hot:indexTab==2}"  @click="tabSwitch(2)"><span>商家评论</span></li>
          </ul>
      </div>
        <div>
        <!--<div class="pendingCmtList pending_comment">-->
            <ul  v-infinite-scroll="moreList"
                 infinite-scroll-disabled="loading"
                 infinite-scroll-immediate-check = "true"
                 infinite-scroll-distance="100">
                <li v-for="item in pendingComtInfo">
                    <div class="li_item white_bg" v-show="indexTab!=1">
                        <div class="pendingMert" @click="jumpShop(item)">
                            <div class="pendingImg"><img :src="item.mchtLogUrl"></div>
                            <div class=pendingTit><span class="right color_red">￥{{item.mchtPer}}/人</span><p class="comt_mcht_name">{{item.mchtName}}</p></div>
                            <div class="pendingTit2 pendingMt"><span class="right">{{item.mchtArea||'无'}}</span>{{item.mchtTypeValue}}</div>
                        </div>
                        <div class="clear"></div>
                        <div class="pendingBtn">
                            <p @click="commentBtn(item)">评一下</p>
                        </div>
                    </div>

                    <!-- <div class="li_item" v-show="item.couponNo||indexTab!=2"> -->
                    <div class="li_item white_bg" v-show="indexTab!=2" v-if="item.couponNo && !(item.type=='present') && !(item.type=='ticket')">
                        <div class="coupon_item" @click="jumpCoupon(item)">
                          <div class="couponDiv">
                            <coupon-denomination :item="item"></coupon-denomination>
                          </div>
                            <!-- <div class="couponDiv" :class="{'coupon_yellow':item.type=='cash','coupon_green':item.type=='rebate','coupon_blue':item.type=='voucher','coupon_orange':item.type=='present','coupon_purple':item.type=='ticket'}">
                                <div class="_num" :class="{'coupon_color_y':item.type=='cash','coupon_color_g':item.type=='rebate','coupon_color_b':item.type=='voucher','coupon_color_o':item.type=='present','coupon_color_p':item.type=='ticket'}">Coupon</div>
                                <div class="_num_price">
                                    <coupon-num :num="item.denomination" :type="item.type"></coupon-num>
                                </div>
                                <div class="coupon_type">{{item.type | couponTp}}</div>
                            </div> -->
                            <div class="pendingTit">{{item.name}}</div>
                            <div class="pendingTit2"><span class="right"> ×{{item.couponNum}}(张)</span>{{item.type | couponDollar}}{{item.denomination}}{{item.type | couponUnit}}{{item.type | couponTp}}</div>
                            <div class="pendingTit2"><span class="right">{{item.validatyBegin | endtimeStampt}}-{{item.validatyEnd | endtimeStampt}}</span>有效期： </div>
                           
                            <div><span class="right"><img v-if="item.couponTypes=='third'" style="width: 1rem;height:1rem"  src="../../images/dui.png"/></span></div>
                             <div><span class="right"><img v-if="item.promAppro=='buy'" style="width: 1rem;height:1rem;margin: 0 .3rem;"  src="../../images/cashIcon.png"/></span></div>
                            <!-- <div class="pendingTit2"><span class="right">13芸券</span>手续费 </div> -->
                        </div>
                        <div class="clear" style="margin-top: .9rem;"></div>
                        <div class="pendingBtn">
                            <p @click="commentBtn(item)">评一下</p>
                            <!-- <span v-if="!item.couponNo">店内堂吃消费</span> -->
                            <!-- <span v-if="item.couponNo">代金券交易</span> -->
                        </div>
                    </div>

                </li>
            </ul>
        </div>
        <!--<div class="loading-box" v-if="moreInfo">-->
            <!--<list-loading v-on:clickEvent="clickMoreList" :noMoreCoupon="noMoreCoupon"></list-loading>-->
        <!--</div>-->
        <no-data v-if="noInfo"></no-data>
        <div class="lastInfoMore" v-if="!moreInfo" v-show="pendingComtInfo.length>3">没有更多</div>
    </div>
</template>
<script>
    import * as types from '../../vuex/types.js'
    import { mapState } from 'vuex'
    import listLoading from '../../componentes/global/listLoading.vue'
    import couponNum from '../../componentes/global/couponNum.vue'
    import {Storage} from 'src/utils/storage.js'

    export default {
        data(){
            return{
                indexTab:"0",
                indexTabC:"0",
                noMoreCoupon:true,
                loading:true,
                moreInfo:true,
                noInfo: false,
            }
        },
        created:function(){
            this.$store.commit(types.pendingInfo);//初始化列表
            this.$store.commit(types.pendingInfoPage,1);//初始化分页
            this.$store.commit(types.GET_SCORLL_STATUS,true);
            this.clickMoreList();
        },
        components: {
            listLoading,
            couponNum
        },
        computed:{
            ...mapState({
                pendingComtInfo:state => state.info.pendingComtInfo,
                pendingPageLimit:state => state.info.pendingPageLimit,
                userInfo:state => state.user.userInfo
            })
        },
        methods:{
            clickMoreList:function(){
                if(!this.noMoreCoupon){//防止重复点击
                    return
                }
                let me = this;
                console.log(this.pendingComtInfo)
                this.noMoreCoupon = false;
                this.$store.dispatch('pendingComt',{method:'post',data:{"type":me.indexTabC}}).then(function(rep){
                    if (rep.content.total <= 0) {
                        me.noInfo = true;
                    } else {
                        me.noInfo = false;
                    }
                    if(rep.content.couponComList){
                        if(rep.content.couponComList.length < me.pendingPageLimit){
                            setTimeout(function(){me.noMoreCoupon = true;},300);
                            me.noInfo=false;
                            me.moreInfo = false;
                        }
                        if(rep.content.couponComList.length == me.pendingPageLimit){//如果列表数据够10条，开启下拉加载
                            me.moreInfo=true;
                            me.loading = false;
                            me.noMoreCoupon = true;
                        }
                    }else{
                        setTimeout(function(){me.noMoreCoupon = true;},300);
                    }
                }).catch(function(rep){
                    setTimeout(function(){me.noMoreCoupon = true;},300);
                });
            },
            moreList:function(){
                this.loading = true;
                this.noMoreCoupon = true;
                this.clickMoreList();

            },
            tabSwitch:function(num){
                this.$store.commit(types.pendingInfo);//初始化列表
                this.$store.commit(types.pendingInfoPage,1);//初始化分页
                this.indexTab = num;
                if (num==2) {
                    this.indexTabC=0
                }else{
                    this.indexTabC=num
                }
                this.noMoreCoupon = true;
                this.clickMoreList();
            },
            commentBtn:function(item){
                this.$store.commit("setPendingInfo",item);
                // console.log(item.mchtId);
                // this.$router.push({path:'/doComment', params:{mchtId:item.mchtId,couponId:item.couponNo}})
                if(item.promAppro=='buy'){
                	 this.$router.push({name:'doComment', query:{mchtId:item.mchtId,couponNos:item.couponNo,orderId:item.orderId,goHome:false,buy:true}})
                }else{
                	 this.$router.push({name:'doComment', query:{mchtId:item.mchtId,couponNos:item.couponNo,orderId:item.orderId,goHome:false}})
                }

            },
            //跳商户
            jumpShop:function(item){
              this.$router.push({
                name: 'merchDetail',
                query: {mchtId: item.mchtId}
              });
            },
            //跳电子券
            jumpCoupon:function(params){
                var me=this;
                Storage.set("couponInfo",params);
                // this.$router.push({name:'couponDetail',query:{type:'noExchange'}});
                this.$router.push({
                  name:'couDetail',
                  query: {
                    type:'noExchange',
                    couponId: params.couponId,
                    mchtId: params.mchtId,
                    seq: params.seqNo||'',
                    usrId: '',
                    usrPicId: ''
                  }
                });
            }
        }
    }
</script>
<style scoped>
    .pending_comment{width: 100%}
    .pendingCmtList{overflow: hidden;}
    .pendingCmtList li .li_item{padding: .667rem .667rem 0;overflow: hidden;margin-bottom:.6rem;}
    .pendingMert{background:#f8f8f8;overflow: hidden;padding: .6rem;height:4.6rem;}
    .pendingImg{width: 3.5rem;height:3.5rem;float: left;}
    .pendingImg img{width: 100%;height: 100%;}
    .pendingTit{padding-left: .6rem;overflow: hidden;line-height: 1.4rem;padding-top: 0.9rem}
    .pendingTit span{float:right;font-size:1rem;color:#666;}
    .pendingTit2{padding-left: .6rem;overflow: hidden;font-size:1rem;color:#666;line-height: 1.4rem;}
    .pendingCmtList .card_img{margin-top: 0;}
    .pendingMt{margin-top: .6rem;}
    .pendingBtn{height: 3rem;line-height: 3rem;border-top:1px solid #e6e6e6;padding: 0 0 0 .667rem;color:#666;}
    .pendingBtn p{float: right;color:#fff;background:linear-gradient(35deg, #ec4e8a, #f95a7c);height: 2.2rem;margin-top:.4rem;line-height: 2.2rem;padding: 0 1.6rem;border-radius: .2rem;}
    .pendingCmtList .pendingTit{padding: 0.6rem 0 0.25rem 0.6rem}
    .pendingCmtList .pendingTit2{padding:0.15rem 0 0.15rem 0.6rem;}
    .pendingCmtList .coupon_item{padding-bottom: 0.5rem;}
    .li_item{background: white;margin-bottom: .667rem;padding: .5rem .5rem;}
    .li_item .pendingMert .pendingTit{padding-top: 0.3rem}
    .li_item .pendingMt{margin-top: 0}
    .li_item .comt_mcht_name {
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        color: #333;
    }
</style>
